<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom :isAppBtn="false"></HeadCustom>
		<view class="wrap">
			<view class="title font46 font-weight">项目经历</view>
			<view class="tips mt16 font30 font-w300">项目经历可以很好提现你在某一领域的专业性</view>
			<view class="card-wrap">
				<view class="card-item" v-for="(item, index) in experienceList" :key="index">
					<view class="tit font26 color-BF8355 flex1">{{item.title}}</view>
					<view class="mt16" v-if="item.type== 'input'">
						<!-- <input type="text" placeholderClass="inputPlaceholder" :placeholder="item.placeholder" maxlength="30" clearable v-model="fromData[item.key]" /> -->
						<u--input :placeholder="item.placeholder" maxlength="30" border="none" fontSize="34rpx" clearable v-model="fromData[item.key]" placeholderStyle="border:none;" placeholderClass="inputPlaceholder"></u--input>
					</view>
					<view v-else class="con mt20 lh50 fboxRow Ycenter" @click="itemTap(item)">
						<view class="flex1 font34">
							<text v-if="item.key == 'gmtEndWork'">
							<template v-if="fromData[item.key]">{{fromData[item.key].replace('-', '.')}}</template>
							<text class="color-6B707C" v-else>{{item.placeholder}}</text>
							</text>
							<text v-else-if="item.key == 'gmtStartWork'">
							<template v-if="fromData[item.key]">{{fromData[item.key].replace('-', '.')}}</template>
							<text class="color-6B707C" v-else>{{item.placeholder}}</text></text>
							<text v-else-if="fromData[item.key]">{{fromData[item.key]}}</text>
							<text v-else class="color-6B707C">{{item.placeholder}}</text>
						</view>
						<text class="bwfont bw-arrow-right color-ACB4C7 font24"></text>
					</view>
					<view class="line"></view>
				</view>
			</view>
		</view>
		<PickerBlack type="year-month" :isShow.sync="isDate" :val="dateVal" :minDate="startDate" :maxDate="endDate"
			@confirm="dateConfirm" />
		<ModelPublic ref="modelRef" content="您确定要删除吗？" @confirm="delModal" />
		<BottomFixed>
			<view class="btn-group-inner flex1 fboxRow Ycenter Xcenter">
				<view v-if="this.index" class="btn flex1 fboxRow Ycenter Xcenter font30 bg-gray-btn"
					@click="delTap">删除</view>
				<view class="btn flex1 fboxRow Ycenter Xcenter font30 color-141720 bg-linear" @click="save">保存</view>
			</view>
		</BottomFixed>
	</view>
</template>

<script>
	import {
		timestampToTime,
		getDate,
		throttle
	} from '@/static/js/common.js';
	import { recruitMixins } from '../common/recruit.mixins.js';
	import PickerBlack from '../components/picker-black.vue';
	import ModelPublic from '@/components/model-public/index.vue';
	import BottomFixed from '@/components/bottom-btn/fixed.vue'
	
	export default {
		mixins: [recruitMixins],
		components: {
			PickerBlack,
			ModelPublic,
			BottomFixed
		},
		data() {
			return {
				theme: getApp().globalData.appTheme,
				globalColor: getApp().globalData.globalColor,
				experienceList: [{
						title: '项目名称',
						placeholder: '请输入项目名称',
						key: 'projectName',
						type: 'input'
					},
					{
						title: '担任职位',
						placeholder: '请输入担任职位',
						key: 'position',
						type: 'input'
					},
					{
						title: '开始时间',
						placeholder: '请选择开始时间',
						key: 'gmtStartWork',
						type: 'arrow'
					},
					{
						title: '结束时间',
						placeholder: '请选择结束时间',
						key: 'gmtEndWork',
						type: 'arrow'
					},
					{
						title: '项目描述',
						placeholder: '请输入',
						key: 'projectDescription',
						type: 'arrow'
					}
				],
				index: '',
				isDate: false,
				dateType: '',
				fromData: {
					"gmtEndWork": "",
					"gmtStartWork": "",
					"position": "",
					"projectDescription": "",
					"projectName": ""
				},
				isCon: false,
				startDate: getDate('start', 60),
				endDate: getDate('end', 0),
				dateVal: new Date().getTime(),
			}
		},
		onLoad(option) {
			if (option && option.index) {
				this.index = option.index
			}
			if (option && option.isCon) {
				this.isCon = option.isCon == 1 ? true : false
			}
		},
		onShow() {
			this.getInit()
		},
		methods: {
			getInit() {
				const projectExperience = getApp().globalData.projectExperience
				if (projectExperience.hasOwnProperty('projectName')) {
					this.fromData = projectExperience
				}
			},
			itemTap(e) {
				const {gmtStartWork, gmtEndWork} = this.fromData
				getApp().globalData.projectExperience = this.fromData
				if (e.key == 'projectDescription') {
					this.$pageTo('/recruit/user/vita-textarea?pageType=projectDescription')
				} else if (e.key == 'gmtStartWork') {
					this.isDate = true
					this.dateType = 'gmtStartWork'
					this.endDate = gmtEndWork ? new Date(gmtEndWork.replace(/-/g,'/')+'/01').getTime() : new Date().getTime()
					this.startDate = getDate('start', 60)
					this.dateVal = gmtStartWork ? new Date(gmtStartWork.replace(/-/g,'/')+'/01').getTime() : new Date().getTime()
				} else if (e.key == 'gmtEndWork') {
					this.isDate = true
					this.dateType = 'gmtEndWork'
					this.startDate = gmtStartWork ? new Date(gmtStartWork.replace(/-/g,'/')+'/01').getTime() : getDate('start', 60)
					this.endDate = new Date().getTime()
					this.dateVal = new Date().getTime()
				}
			},
			dateConfirm(e) {
				if (this.dateType == 'gmtStartWork') {
					this.fromData.gmtStartWork = timestampToTime(e.value, 'YM')
				} else {
					this.fromData.gmtEndWork = timestampToTime(e.value, 'YM')
				}
				this.isDate = false
			},
			delTap(){
				this.$refs.modelRef.show = true
			},
			save: throttle(function (event) {
				uni.showLoading({ title: '保存中', mask: true })
				let state = true
				this.experienceList.filter(item=>{
					if(!this.fromData[item.key] && state){
						uni.showToast({
							icon: 'none',
							title: item.placeholder
						})
						state = false
					}
				})
				if(state){
					this.loading = true
					const vitaTemp = getApp().globalData.vitaTemp
					if (this.isCon) {
						vitaTemp.projectExperienceList.splice(this.index, 1, this.fromData)
						this.postSave(vitaTemp, 'back')
					} else {
						vitaTemp.projectExperienceList.push(this.fromData)
						this.postSave(vitaTemp, 'back')
					}
				}
			}, 2000),
			delModal() {
				const vitaTemp = getApp().globalData.vitaTemp
				vitaTemp.projectExperienceList.splice(this.index, 1)
				this.$refs.modelRef.show = false
				this.postSave(vitaTemp, 'back')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-wrap {
		min-height: calc(100vh);
	}
	.title { line-height: 66rpx; color:var(--contourButtonTextColor) }
	.tips { line-height: 44rpx; color: var(--contentFontLightColor) }
	.tit{color:var(--contentFontDarkColor);}


	.wrap {
		padding: 40rpx;
	}

	.u-textarea {
		background-color: var(--viewBgColor);
	}

	.uni-input {
		padding: 0 32rpx;
		width: 542rpx;
		height: 88rpx;
		background: var(--viewBgColor);
		border-radius: 12rpx;
	}

	.card-wrap {
		padding-top: 64rpx;
	}

	.line {
		margin: 40rpx 0;
		height: 1rpx;
		background: var(--backgroundDivisionColor);
	}
	.btn-group-inner .btn {
		height: 76rpx;
		border-radius: 12rpx;
	}

	.btn-group-inner .btn+.btn {
		margin-left: 24rpx;
	}
</style>